<template>
  <slash-panel-body>
    <QueryForm :init-query="initQuery" v-model:value="queryForm" @submit="reloadTable">
      <!--      <template #more="{ queryForm }">-->
      <!--        <n-form-item label="姓名">-->
      <!--          <n-input v-model:value="queryForm['111']" placeholder="输入姓名" />-->
      <!--        </n-form-item>-->
      <!--        <n-form-item label="姓名">-->
      <!--          <n-input v-model:value="queryForm['111']" placeholder="输入姓名" />-->
      <!--        </n-form-item>-->
      <!--        <n-form-item label="姓名">-->
      <!--          <n-input v-model:value="queryForm['111']" placeholder="输入姓名" />-->
      <!--        </n-form-item>-->
      <!--        <n-form-item label="姓名">-->
      <!--          <n-input v-model:value="queryForm['111']" placeholder="输入姓名" />-->
      <!--        </n-form-item>-->
      <!--      </template>-->
      <template #default="{ queryForm }">
        <n-form-item label="应用名称">
          <n-input v-model:value="queryForm['appName-like']" placeholder="请输入应用名称" />
        </n-form-item>
        <n-form-item label="应用状态">
          <n-select style="width: 200px" v-model:value="queryForm['enabled']"
                    :options="enabledOptions" />
        </n-form-item>
        <n-form-item label="创建时间">
          <n-date-picker value-format="yyyy-MM-dd HH:mm:ss"
                         v-model:formatted-value="queryForm['createTime-gte']" type="datetime"
                         placeholder="开始时间" />
          <span class="ml-3 mr-3">-</span>
          <n-date-picker alue-format="yyyy-MM-dd HH:mm:ss"
                         v-model:formatted-value="queryForm['createTime-lte']" type="datetime"
                         placeholder="结束时间" />
        </n-form-item>
        <n-form-item label="关键字">
          <n-input v-model:value="queryForm['searchKey']" placeholder="请输入查询关键字" />
        </n-form-item>
      </template>

    </QueryForm>
  </slash-panel-body>
  <slash-panel-body>
    <n-space>
      <n-button v-auth="'7Z5XJBO7HE'" type="primary" @click="doSaveModal()">
        新建
      </n-button>
      <n-button type="warning" @click="doUpdateModal()">
        编辑
      </n-button>
      <n-button type="error" @click="doDeleteModal()">
        删除
      </n-button>
    </n-space>
  </slash-panel-body>
  <slash-panel-body>
    <BasicTable
      :columns="tableColumns"
      :request="loadDataTable"
      :row-key="(row) => row.id"
      ref="tableRef"
      v-model:checked-row-keys="checkedRows"
      :scroll-x="1090"
    >
      <template #tableTitle>
      </template>
      <template #toolbar>
      </template>
    </BasicTable>
  </slash-panel-body>
</template>

<script lang="ts">
import { defineComponent } from "vue";
import { BasicTable } from "@/components/Table";
import api from "@/views/SysApp/httpApi";
import { QueryForm } from "@/components/QueryForm";
import {
  checkedRows,
  doDeleteModal,
  doSaveModal,
  doUpdateModal,
  enabledOptions,
  initQuery,
  onCheckedRowEvent,
  queryForm,
  reloadTable,
  tableColumns,
  tableRef
} from "./Service";
import SlashPanelBody from "@/components/Panel/SlashPanelBody.vue";

export default defineComponent(
  {
    components: { SlashPanelBody, BasicTable, QueryForm },
    setup() {
      const loadDataTable = async (res) => {
        console.log("更新", checkedRows.value);
        return await api.doSelectPageList({
          searchKey: null,
          ...res,
          ...queryForm.value
        });
      };
      return {
        initQuery,
        loadDataTable,
        checkedRows,
        reloadTable,
        tableColumns,
        onCheckedRowEvent,
        enabledOptions,
        queryForm,
        tableRef,
        doSaveModal,
        doUpdateModal,
        doDeleteModal
      };
    }
  }
);


</script>

<style lang="less" scoped></style>
